<!-- ai策略 -->
<template>
	<view class="content">
		<!-- <effect-input  type="haruki" label="初始资金"></effect-input> -->
		<u-form :model="form" ref="uForm">

			<view class="form-line">

				<u-form-item label-width="130rpx">
					<u-input v-model="form.market" type="select" @click="showMarket = true" placeholder="市场"
						:custom-style="inputStyle" />
				</u-form-item>

				<u-form-item label-width="130rpx">
					<u-input v-model="form.coin" type="select" @click="showcoin = true" placeholder="币种"
						:custom-style="inputStyle" />
				</u-form-item>
			</view>

			<view class="form-line">
				<u-form-item label-width="130rpx">
					<u-input v-model="form.initialFund" placeholder="初始资金" :custom-style="inputStyle" />
					<!-- <effect-input v-model="value" type="nariko" label="初始资金"></effect-input> -->
				</u-form-item>

				<view class="right subsection">
					<u-subsection :list="list" mode="subsection" :current="current" @change="subsectionChange"
						active-color="#ff9900"></u-subsection>
				</view>
			</view>

			

		</u-form>
		
		<!-- <u-slider v-model="slideValue" min="30" max="80"></u-slider> -->
		<view class="slide ">
			<u-slider v-model="slideValue" :use-slot="true" min="25" max="100" step="25">
			
				<view class="">
					<view class="badge-button">
						{{slideValue/5}}倍
					</view>
				</view>
			</u-slider>
		</view>
		
		<!-- <effect-input v-model="value" type="hoshi" label="hoshi"></effect-input>  -->
		<view class="u-btn">
			<u-button type="primary" size="large" :ripple="true" shape="circle">创建策略</u-button>
		</view>
		<u-action-sheet :list="marketList" v-model="showMarket" @click="marketCallback"></u-action-sheet>
		<u-action-sheet :list="coinList" v-model="showcoin" @click="coinCallback"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				slideValue:25,
				value: '',
				form: {
					market: "",
					coin: "",
					initialFund: "",
				},
				showMarket: false,
				marketList: [{
					text: "Huobi交割"
				}, {
					text: "Huobi永续币本位"
				}],
				showcoin: false,
				coinList: [{
					text: "BTC"
				}, {
					text: "ETH"
				}],
				// 分段器
				list: [{
						name: '做多'
					},
					{
						name: '做空'
					}
				],
				current: 0,
				// INPUT
				inputStyle: {
					color: "aliceblue",
				},
			};
		},

		components: {},

		computed: {},

		mounted() {},

		methods: {
			coinCallback(index) {
				this.form.coin = this.coinList[index].text;
			},
			marketCallback(index) {
				this.form.market = this.marketList[index].text;
			},
			subsectionChange(index) {
				this.current = index;
			}
		},
	};
</script>
<style lang='scss' scoped>
	.content {
		font-size: 24rpx;
		padding: 0 20rpx 150rpx 20rpx;
		color: #696c89;
		.slide {
			width: 88vw;
			margin-top: 30rpx;
		}
		.form-line {
			min-width: 90vw;
			display: flex;
			justify-content: space-between;
			border: 1px solid dashed aquamarine;

			&:after {
				border: 1px solid dashed aquamarine;
			}

			.u-border:after,
			.u-border-bottom:after {
				border-bottom: none;
			}

			.u-input {
				width: 320rpx;
			}

			.subsection {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.sub-title {
					font-weight: 700;
				}

				.u-subsection {
					width: 300rpx;
					height: 10rpx;
				}
			}

		}



		.u-btn {
			margin: 30rpx auto;
			display: flex;
			align-items: center;

			.u-size-large {
				font-size: 28rpx;
				width: 500rpx;
				height: 70rpx;
			}
		}

		.badge-button {
			padding: 4rpx 6rpx;
			background-color: $u-type-error;
			color: #fff;
			border-radius: 10rpx;
			font-size: 22rpx;
			line-height: 1;
		}
	}
</style>
